<template>
  <div id="app">
    <!-- 背景板 -->
    <vue-particles id="tsparticles" :options="option" />
    <!-- form表单 -->
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户" prop="user">
        <el-input type="text" v-model="ruleForm.user" autocomplete="off">
        </el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">
          提交
        </el-button>
        <router-link to="/"> 跳转 </router-link>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'login',
  data() {
    return {
      option: {
        background: {
          color: {
            value: '#2d3a4b',
          },
        },
        fpsLimit: 120,
        interactivity: {
          events: {
            onClick: {
              enable: true,
              mode: 'push',
            },
            onHover: {
              enable: true,
              mode: 'repulse',
            },
            resize: true,
          },
          modes: {
            bubble: {
              distance: 400,
              duration: 2,
              opacity: 0.8,
              size: 40,
            },
            push: {
              quantity: 4,
            },
            repulse: {
              distance: 200,
              duration: 0.4,
            },
          },
        },
        particles: {
          color: {
            value: '#ffffff',
          },
          links: {
            color: '#ffffff',
            distance: 150,
            enable: true,
            opacity: 0.5,
            width: 1,
          },
          move: {
            direction: 'none',
            enable: true,
            outMode: 'bounce',
            random: false,
            speed: 6,
            straight: false,
          },
          number: {
            density: {
              enable: true,
              area: 800,
            },
            value: 80,
          },
          opacity: {
            value: 0.5,
          },
          shape: {
            type: 'circle',
          },
          size: {
            value: { min: 1, max: 5 },
          },
        },
        detectRetina: true,
      },
      ruleForm: {
        user: '123',
        password: '1234567',
      },
      rules: {
        user: [
          { required: true, message: '输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 5,
            message: '长度在 3 到 5 个字符',
            trigger: 'change',
          },
        ],
        password: [
          { required: true, message: '输入密码', trigger: 'blur' },
          {
            min: 7,
            max: 12,
            message: '长度在 7 到 12 个字符',
            trigger: 'change',
          },
        ],
      },
    }
  },
  methods: {
    submitForm(fromName) {
      this.$refs[fromName].validate((boo, err) => {
        if (boo) localStorage.setItem('token_lg', '666')
      })
    },
  },
}
</script>
<style scoped>
.el-form {
  width: 500px;
  height: 300px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
:deep .el-form-item__label {
  color: #fff;
}
</style>
